<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    
    	    <div class="search">
        	    按照价格查询: <input type="text" class="start"> - <input type="text" class="end"> <button class="search-price" id="sn">搜索</button>
    	    按照商品名称查询: <input type="text" class="product"> <button class="search-pro" id="pn">查询</button>
        	  </div>
       
        <table>
            <thead>
                <tr>
               <th>id</th>
               <th>产品名称</th>
               <th>价格</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
   
        
        <script>
           
             var data =[{
 	      id: 1,
 	      pname: '小米',
 	      price: 3999
 	    }, {
 	      id: 2,
 	      pname: 'oppo',
 	      price: 999
 	    }, {
 	     id: 3,
 	      pname: '荣耀',
 	      price: 1299
 	    }, {
 	      id: 4,
 	      pname: '华为',
 	      price: 1999
 	    }, ];

          $(function()
          {
   //存放数据
   function setDate(mydate)
         {
        $("tbody").html("");
            mydate.forEach(function (value)
            {
                var tr = document.createElement('tr');
 	        tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
                $("tbody").append(tr)
            
            })
        }
         //查询价格
         $("#sn").bind("click",function()
         {
             var newDate = data.filter(function(value)
             {
                 
                return value.price>=$(".start").val() && value.price<=$(".end").val()
             })
             setDate(newDate);
          //   alert(newDate)
         })
         
         //查询商品
         $("pn").bind("click",function()
         {
          
              var arr = [];
             data.some(function(value){
                 if(value.pname===$(".product").val())
                 {
                     arr.push(value)
                 }
             })  
              setDate(arr)
         })

          })
      


        </script>
</body>
</html>